$(document).ready(function(){

    
    var arr = location.search.match(/id=(\d+)/)
    if(!arr){
        layer.msg('非法访问',{
            icon:2,
            time:2000
        },function(){
            location.href = "list.html"
        });
    }
    var id = arr[1]
    
    var username = tool.getCookie('username');
    if(username){
        
        $('.sale-btn>.btn').text('加入购物车');
        
        $.ajax({
            url:'php/history.php',
            data:{
                username,
                goodsid:id
            },
            method:"post",
        });

    }
    
    
    $.ajax({
        url:'php/list.php',
        data:{cat:'all'},
        dataType:"json",
        success(res){
            var {data} = res;
            data = data.sort(function(a,b){
                return b.readnum - a.readnum
            }).slice(0,3)
        }
    });

    $.ajax({
        url:"php/details.php",
        data:{id},
        dataType:"json",
        success:res=>{
            
            var {data} = res;
            var smallImgs = data.manyImg.split('==========')
            var str = '';
            smallImgs.forEach(item=>{
                str += `
                    <img src="${item}">
                `
            });

            $('.img-box>img').attr('src',data.img);
            $('.bigImg>img').attr('src',smallImgs[0]);
            $('.small').html(str);
            $('.small').children().eq(0).addClass('active');
            $('.product-con>h2').text(data.name);

            
            $('.product-con .price-info>span').text(data.price);
            $('.product-con .subscribe-info .left .price>span').text(data.price);
            $('.product-con .subscribe-info .left .name').text('火热促销中');
            $('.introduce .content').html(data.introduce);
            Enlarge();
            Tab();
        }
    });
    $('.buy-option ul li').click(function () {
        $(this).addClass('active').siblings().removeClass('active');
    })
    
    $('.sale-btn>.btn').click(function(){
        if(!username){
            layer.msg('请先登录',{
                icon:2,
                time:1500
            },function(){
                localStorage.setItem('url',location.href)
                location.href = "login.html"
            })
            return false;
        }
        var str = localStorage.getItem('cartData');
        if(str){
            var arr = JSON.parse(str)
            var data = arr.find(item=>item.username === username && item.id === id)
            if(data){
                data.number++
                localStorage.setItem('cartData',JSON.stringify(arr))
            }else{
                var obj = {
                    id,
                    number:1,
                    username, 
                    suit:$('.batch-box li.active>a').text()
                }
                arr.push(obj)
                localStorage.setItem('cartData',JSON.stringify(arr))
            }
        }else{
            var obj = {
                id,
                number:1,
                username,
                suit:$('.batch-box li.active>a').text()
            }
            var arr = [];
            arr.push(obj)
            localStorage.setItem('cartData',JSON.stringify(arr))
        }
        
        layer.msg('购物车添加成功，请移步购物车结算',{
            icon:1,
            time:1500
        })
        
        return false;
    });
    
    
    function Enlarge(){
        $('.img-box').hover(function () { 
            $(this).children().eq(1).show();
            $(this).next().show();
        },function(){
            $(this).children().eq(1).hide();
            $(this).next().hide();
        });
        
        $('.img-box').mousemove(e=>{
            var x = e.pageX;
            var y = e.pageY;
            var left = x - $('.img-box').children().eq(1).width()/2;
            var top = y -  $('.img-box').children().eq(1).height()/2;

            if(left <= $('.img-box').offset().left +1){
                left = $('.img-box').offset().left +1;
            }
            if(top <= $('.img-box').offset().top+1){
                top = $('.img-box').offset().top+1;
            }
            if(left >= $('.img-box').width()+$('.img-box').offset().left - $('.img-box .mask').width()+1){
                left = $('.img-box').width()+$('.img-box').offset().left - $('.img-box .mask').width()+1
            }
            if(top >= $('.img-box').height()+$('.img-box').offset().top - $('.img-box .mask').height()+1){
                top = $('.img-box').height()+$('.img-box').offset().top - $('.img-box .mask').height()+1
            }
            $('.img-box .mask').offset({
                left,top
            });

            var big_left = $('.img-box>.mask').position().left/$('.img-box').width() *$('.bigImg>img').width()+1;
            var big_top = $('.img-box>.mask').position().top/$('.img-box').height() *$('.bigImg>img').height()+1;
            
            $('.bigImg>img').css({
                left: -big_left+'px',
                top: -big_top+'px'
            });
        });
    }
    function Tab(){
        $('.small>img').click(function(){
            $(this).addClass('active').siblings().removeClass('active');
            $('.img-box>img').attr('src',$(this).attr('src'));
            $('.bigImg>img').attr('src',$(this).attr('src'));
        })
    }
});